<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 图片区域 */
        
        .preview_img {
            position: absolute;
            width: 398px;
            height: 398px;
            border: 1px solid #ccc;
        }
        
        .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: burlywood;
            opacity: 0.5;
        }
        
        .big {
            position: absolute;
            top: 0;
            left: 500px;
            border: 1px solid #ccc;
            width: 500px;
            height: 600px;
            overflow: hidden;
        }
        
        .bigIMg {
            position: absolute;
        }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
</head>

<body>
    <!-- 图片预览区域 -->
    <div class="preview_img">
        <!-- 图片 -->
        <img src="images/phone.png" alt="">
        <!-- 放大镜 -->
        <div class="mask"></div>
        <!-- 展示放大后图片效果 -->
        <div class="big">
            <img src="images/bigphone.png" alt="" class="bigIMg">
        </div>
    </div>
    <script>
        $(function() {
            $(".mask").hide();
            $(".big").hide();
            $(".preview_img").on({
                "mouseover": function() {
                    $(".mask").show();
                    $(".big").show();
                },
                "mouseout": function() {
                    $(".mask").hide();
                    $(".big").hide();
                },
                "mousemove": function(e) {
                    var maskX = e.pageX - $(".mask").outerWidth() / 2;
                    var maskY = e.pageY - $(".mask").outerHeight() / 2;
                    if (maskX <= $(".preview_img").offset().left) {
                        maskX = $(".preview_img").offset().left
                    }
                    if (maskX >= $(".preview_img").offset().left + $(".preview_img").outerWidth() - $(".mask").outerWidth()) {
                        maskX = $(".preview_img").offset().left + $(".preview_img").outerWidth() - $(".mask").outerWidth()
                    }
                    if (maskY <= $(".preview_img").offset().top) {
                        maskY = $(".preview_img").offset().top
                    }
                    if (maskY >= $(".preview_img").offset().top + $(".preview_img").outerHeight() - $(".mask").outerHeight()) {
                        maskY = $(".preview_img").offset().top + $(".preview_img").outerHeight() - $(".mask").outerHeight()
                    }
                    $(".mask").offset({
                        left: maskX,
                        top: maskY
                    })
                    var imgx = (maskX - $(".preview_img").offset().left) * ($(".bigIMg").outerWidth() - $(".big").innerWidth()) / ($(".preview_img>img").innerWidth() - $(".mask").outerWidth())
                    var imgy = (maskY - $(".preview_img").offset().top) * ($(".bigIMg").outerHeight() - $(".big").innerHeight()) / ($(".preview_img>img").innerHeight() - $(".mask").outerHeight())
                    $(".bigIMg").css({
                        left: -imgx,
                        top: -imgy
                    })
                }
            })
        })
    </script>

</body>

</html>